<?php
$error = $this->Session->flash();
if(!empty($error)){?>
<div class="warning"><?php echo $error; ?></div>
<?php } ?>
<div id="column-right">
    <?php echo $this->element('sidebar'); ?>
</div>

<div id="content">
    <div class="tab"><h1>Register Account</h1></div>
    <?php
    echo $this->Form->create(null, array(
        'type' => 'post', 'id' => 'frm_login',
        'autocomplete' => 'off'
    ));
    ?>
    <div class="content">
        <table class="form">
            <tbody><tr>
                    <td><span class="required">*</span>  Name:</td>
                    <td>
                        <?php echo $this->Form->input('User.fullname', array('label' => false, 'class' => 'inputbox home_login_input', 'autocomplete' => 'off')); ?>
                    </td>
                </tr>
                <tr>
                    <td><span class="required">*</span> Username:</td>
                    <td>
                        <?php echo $this->Form->input('User.username', array('label' => false, 'class' => 'inputbox home_login_input', 'autocomplete' => 'off')); ?>
                    </td>
                </tr>
                <tr>
                    <td><span class="required">*</span> E-Mail:</td>
                    <td>
                        <?php echo $this->Form->input('User.email', array('label' => false, 'class' => 'inputbox home_login_input', 'autocomplete' => 'off')); ?>
                    </td>
                </tr>
                <tr>
                    <td><span class="required">*</span> Password:</td>
                    <td>
                        <?php echo $this->Form->input('User.password', array('type' => 'password', 'label' => false, 'class' => 'inputbox home_login_input', 'autocomplete' => 'off')); ?>
                    </td>
                </tr>
                <tr>
                    <td><span class="required">*</span> Password Confirm:</td>
                    <td>
                        <?php echo $this->Form->input('User.re_password', array('type' => 'password', 'label' => false, 'class' => 'inputbox home_login_input', 'autocomplete' => 'off')); ?>
                    </td>
                </tr>
                <tr>
                    <td>Captcha:</td>
                    <td>
                        <?php
                        echo $this->Html->image(
                                array('controller' => 'User', 'action' => 'captcha'), array('alt' => 'Captcha', 'class' => 'img_captcha',
                            'style' => 'float: left; margin-right: 10px;'
                                )
                        );
                        ?> 
                    </td>
                </tr>
                <tr>
                    <td>Captcha code:</td>
                    <td><?php echo $this->Form->input('User.captcha', array('class' => 'input_img_captcha', 'label' => false, 'style' => 'width: 122px;', 'class' => 'home_login_input', 'value' => '', 'placeholder' => 'Enter captcha code', 'autocomplete' => 'off')); ?></td>
                </tr>

            </tbody></table>
    </div>

    <div class="buttons">
        <div class="right">
            <input type="submit" value="Continue" class="button">
        </div>
    </div>
</form>
</div>
<script type="text/javascript">
    $(function() {
        if('<?php echo isset($success) && $success ? $success : 0; ?>' == '1') {
            setTimeout(function () {
                window.location.href = '/account';
            }, 2000);
        }
    });
</script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#frm_login").validate({
            rules: {
                "data[User][fullname]": {
                    required: true,
                    minlength: 6,
                    maxlength: 32
                },
                "data[User][username]": {
                    required: true,
                    minlength: 6
                },
                "data[User][email]": {
                    required: true,
                    email: true
                },
                "data[User][password]": {
                    required: true,
                    minlength: 6,
                    maxlength: 20
                },
                "data[User][re_password]": {
                    required: true,
                    equalTo: "#UserPassword"
                }
            },
            messages: {
                "data[User][fullname]": {
                    required: "Please enter a fullname!",
                    minlength: "Fullname must be between 6 and 32 characters!",
                    maxlength: "Fullname must be between 6 and 32 characters!"
                },
                "data[User][username]": {
                    required: "Please enter a username",
                    minlength: "Username must be between 6 and 10 characters!!"
                },
                "data[User][email]": {
                    required: "Please enter your email!",
                    email: "E-Mail Address does not appear to be valid!"
                },
                "data[User][password]": {
                    required: "Please enter password!",
                    minlength: "Password must be between 6 and 20 characters!",
                    maxlength: "Password must be between 6 and 20 characters!"
                }
            }
        });
    });
</script>
<style type="text/css">
    .required {
        font-weight: normal !important;
    }
</style>
